<template>
  <div class="whole">
    <el-form
      ref="studentScore"
      class="studentScore"
      :model="studentScore"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="name" label="学生姓名：">
        <el-input v-model.trim="studentScore.name"> </el-input>
      </el-form-item>

      <el-form-item prop="code" label="学号：">
        <el-input v-model="studentScore.code"> </el-input>
      </el-form-item>
      <el-form-item prop="onlineScore" label="在线成绩：">
        <el-input v-model.trim="studentScore.onlineScore"> </el-input>
      </el-form-item>
      <el-form-item prop="classScore" label="课堂成绩：">
        <el-input v-model.trim="studentScore.classScore"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="insert"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"

          @click="()=>$refs.studentScore.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
let ccccc = 2;
export default {
  name: "Leader",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      studentScore: {
        name: null,
        code: null,
        classScore: null,
        onlineScore: null,
        scoreId: null,
      },
      // rules: {
      //     username: [
      //         {required: true,   message: '请输入账号', trigger: 'blur'},
      //         {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
      //         {required:true, validator:this.validateItem ,trigger:'blur'}
      //         ],
      //     password: [
      //         {required: true, message: '请输入密码', trigger: 'blur'},
      //         ],
      //     }

      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "姓名长度2-4", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { pattern: /^\d*$/, message: "学号全部是数字", trigger: "blur" },
          { validator: this.validateItemCode, trigger: "blur" },
        ],
        onlineScore: [
          { pattern: /^\d{1,3}$/, message: "分数为数字", trigger: "blur" },
        ],
        classScore: [
          { pattern: /^\d{1,3}$/, message: "分数为数字", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},

    validateItemCode(rules, value, cb) {
      if (!value) {
        return cb(new Error("学号不能缺失"));
      }
      if (value.length !== 7) {
        return cb(new Error("学号必须是7位"));
      }
      return cb();
    },
    insert() {
      // this.$refs.
    },

  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
.whole {
  background-color: rgba(239, 244, 115, 0.71);
  display: flex;
  justify-content: center;
  align-items: center;
}
.studentScore {
  flex: 0.4;
  margin: 20px 0px 2px 0px;
}
/*.form-item{*/
/*  width: 300px;*/
/*}*/
</style>
